<template>
<el-container class="v-table">
  <el-header height="auto">
    <h1 class="tc">凭证表格测试</h1>
  </el-header>

  <el-main>
    <vxe-table :data="tableData" border stripe show-footer header-align="center" :row-config="rowConf" :keyboard-config="keyboardConf"
               :edit-config="editConf" :scroll-y="scrollY" :footer-method="summaryData" @current-change="doCurrentChange"
               :max-height="500" :min-height="30">
      <vxe-column title="序号" type="seq" width="60px" align="center"></vxe-column>
      <vxe-column title="摘要" field="abstractName" min-width="200"
                  :edit-render="{autofocus: '.el-autocomplete input', autoselect: true}">
        <template #edit="{row}">
          <el-autocomplete v-model="row.abstractName" size="mini" :popper-append-to-body="false" highlight-first-item
                           :fetch-suggestions="querySearch" @select="doAbstractOptions" />
        </template>
      </vxe-column>
      <vxe-column title="科目" field="accountingSubjectName" min-width="250" :edit-render="{autofocus: '.el-select input', autoselect: true}">
        <template #edit="{row}">
          <el-select v-model="row.idAccountingSubjectDTO" size="mini" filterable default-first-option	:popper-append-to-body="false">
            <el-option v-for="item of accountOptions" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </template>
      </vxe-column>
      <vxe-column title="辅助项" field="auxiliaryItem" min-width="120"></vxe-column>
      <vxe-colgroup title="借方金额" field="debitAmount" align="center">
        <vxe-column title="亿" field="debitAmount[0]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(0)}}</template>
        </vxe-column>
        <vxe-column title="千" field="debitAmount[1]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(1)}}</template>
        </vxe-column>
        <vxe-column title="百" field="debitAmount[2]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(2)}}</template>
        </vxe-column>
        <vxe-column title="十" field="debitAmount[3]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(3)}}</template>
        </vxe-column>
        <vxe-column title="万" field="debitAmount[4]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(4)}}</template>
        </vxe-column>
        <vxe-column title="千" field="debitAmount[5]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(5)}}</template>
        </vxe-column>
        <vxe-column title="百" field="debitAmount[6]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(6)}}</template>
        </vxe-column>
        <vxe-column title="十" field="debitAmount[7]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(7)}}</template>
        </vxe-column>
        <vxe-column title="元" field="debitAmount[8]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(8)}}</template>
        </vxe-column>
        <vxe-column title="角" field="debitAmount[9]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(9)}}</template>
        </vxe-column>
        <vxe-column title="分" field="debitAmount[10]" alig="center" width="30px">
          <template slot-scope="{row}">{{row.debitAmount | numberSplit(10)}}</template>
        </vxe-column>
      </vxe-colgroup>
      <vxe-colgroup title="贷方金额" field="creditAmount" align="center">
        <vxe-column title="亿" field="creditAmount[0]" alig="center" width="30px"></vxe-column>
        <vxe-column title="千" field="creditAmount[1]" alig="center" width="30px"></vxe-column>
        <vxe-column title="百" field="creditAmount[2]" alig="center" width="30px"></vxe-column>
        <vxe-column title="十" field="creditAmount[3]" alig="center" width="30px"></vxe-column>
        <vxe-column title="万" field="creditAmount[4]" alig="center" width="30px"></vxe-column>
        <vxe-column title="千" field="creditAmount[5]" alig="center" width="30px"></vxe-column>
        <vxe-column title="百" field="creditAmount[6]" alig="center" width="30px"></vxe-column>
        <vxe-column title="十" field="creditAmount[7]" alig="center" width="30px"></vxe-column>
        <vxe-column title="元" field="creditAmount[8]" alig="center" width="30px"></vxe-column>
        <vxe-column title="角" field="creditAmount[9]" alig="center" width="30px"></vxe-column>
        <vxe-column title="分" field="creditAmount[10]" alig="center" width="30px"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </el-main>
</el-container>
</template>

<script>

const detail = {id: '', serialCode: '', idAbstractDTO: '', abstractName: '', idAccountingSubjectDTO: '', accountingSubjectName: '',
  accountingSubjectCode: '', accountingSubjectAttribute: null, direction: null, qty: null, unit: '', price: null, amount: null,
  debitAmount: null, creditAmount: null, auxiliaryItem: '', remark: '', sort: 0, voucheCode: '', voucheDate: '', details: null,
  accountingSubject: null, balanceAmount: null};

export default {
  name: "VoucherTable",
  data() {
    return {
      data: [],
      // 摘要选项
      abstracOptions: [
        {"id": "7a83f865-0b18-43b6-bcf5-615554bd99ab", "code": "CV0001", "name": "往来凭证001", "idVoucherTypeDTO": "00000000-0000-0000-0000-000000000000",
          "voucherTypeName": null, "annexNum": 0, "idCommonVoucherTypeDTO": "00000000-0000-0000-0000-000000000000", "commonVoucherTypeName": null}
      ],
      // 帐号选项
      accountOptions: [
        {
          "id": "1b778367-4576-90c9-acee-3a02e6d0a5fa",
          "code": "100101",
          "parentId": "db004573-2ea8-4048-a129-ddd76093ea76",
          "name": "987",
          "fullName": "库存现金/987",
          "layer": 2,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": 1,
          "details": [
            {
              "id": "45345e12-35b5-59c5-51c3-3a02ec5dfe5b",
              "idAccountingSubjectDTO": "1b778367-4576-90c9-acee-3a02e6d0a5fa",
              "idAuxiliaryAccountingDTO": "70a43658-413c-5f4a-9046-3a02891b3457",
              "code": "2",
              "name": "个人",
              "attribute": null
            },
            {
              "id": "1b00c84f-fd93-95e7-58f0-3a02ec5dfe7b",
              "idAccountingSubjectDTO": "1b778367-4576-90c9-acee-3a02e6d0a5fa",
              "idAuxiliaryAccountingDTO": "aeacc51c-5384-8d18-d19f-3a02891b7229",
              "code": "3",
              "name": "往来单位",
              "attribute": "1"
            },
            {
              "id": "3c953bb3-c419-36dc-8381-3a02ec5dfeb9",
              "idAccountingSubjectDTO": "1b778367-4576-90c9-acee-3a02e6d0a5fa",
              "idAuxiliaryAccountingDTO": "981b6ae3-299a-f891-6f79-3a02891c3dce",
              "code": "5",
              "name": "存货",
              "attribute": null
            }
          ],
          "balanceAmount": 0
        },
        {
          "id": "83b54223-4a3a-70c8-8567-3a0381e20adb",
          "code": "100102",
          "parentId": "db004573-2ea8-4048-a129-ddd76093ea76",
          "name": "ttttt",
          "fullName": "库存现金/ttttt",
          "layer": 2,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": [
            {
              "id": "77ac2456-ce1a-976f-708c-3a0ed8eda610",
              "idAccountingSubjectDTO": "83b54223-4a3a-70c8-8567-3a0381e20adb",
              "idAuxiliaryAccountingDTO": "6e7cd14a-91a5-b5f4-be01-3a02891c1828",
              "code": "4",
              "name": "项目",
              "attribute": null
            }
          ],
          "balanceAmount": -1005.6
        },
        {
          "id": "a8965544-c25e-4c15-af37-5f5ab347dec5",
          "code": "100103",
          "parentId": "db004573-2ea8-4048-a129-ddd76093ea76",
          "name": "门市现金",
          "fullName": "库存现金/门市现金",
          "layer": 2,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": 1,
          "details": null,
          "balanceAmount": 1302
        },
        {
          "id": "9d999b40-c14e-4af7-0060-3a0381f66207",
          "code": "100201",
          "parentId": "dbd763d8-a0b1-4195-8fb0-02cab2578e43",
          "name": "777777",
          "fullName": "银行存款/777777",
          "layer": 2,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": -51.4
        },
        {
          "id": "d8511790-fdd0-4e82-9ef8-3bf2e7b222d8",
          "code": "1015",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "其他货币资金",
          "fullName": "其他货币资金",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": -1000
        },
        {
          "id": "c0c252c7-ed56-47a2-8f12-06d9e197205a",
          "code": "1101",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "交易性金融资产",
          "fullName": "交易性金融资产",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": 2,
          "details": [
            {
              "id": "b1f77ffa-27d3-47c6-f516-3a081b9dc807",
              "idAccountingSubjectDTO": "c0c252c7-ed56-47a2-8f12-06d9e197205a",
              "idAuxiliaryAccountingDTO": "70a43658-413c-5f4a-9046-3a02891b3457",
              "code": "2",
              "name": "个人",
              "attribute": null
            }
          ],
          "balanceAmount": 0
        },
        {
          "id": "7fcb6b1d-ed0b-cce6-f168-3a05c5ed96da",
          "code": "112101",
          "parentId": "5edb5ca4-61e4-4e63-a28a-4bed9a19c617",
          "name": "qqqq",
          "fullName": "应收票据/qqqq",
          "layer": 2,
          "subjectType": 1,
          "direction": -1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": 2,
          "details": [
            {
              "id": "f98f15d3-ed2c-ed70-77ac-3a0604176e06",
              "idAccountingSubjectDTO": "7fcb6b1d-ed0b-cce6-f168-3a05c5ed96da",
              "idAuxiliaryAccountingDTO": "dc44a370-faed-e09d-b1a9-3a02891add79",
              "code": "1",
              "name": "部门",
              "attribute": null
            },
            {
              "id": "b8183132-8798-376a-d1f7-3a0604176e34",
              "idAccountingSubjectDTO": "7fcb6b1d-ed0b-cce6-f168-3a05c5ed96da",
              "idAuxiliaryAccountingDTO": "981b6ae3-299a-f891-6f79-3a02891c3dce",
              "code": "5",
              "name": "存货",
              "attribute": null
            }
          ],
          "balanceAmount": -228
        },
        {
          "id": "f83cd61d-8c6c-aa80-e7c2-3a0912e3db91",
          "code": "11220101",
          "parentId": "77fbf5d7-379d-8dc2-3b0c-3a05c2873ed1",
          "name": "123-1111",
          "fullName": "应收账款/123/123-1111",
          "layer": 3,
          "subjectType": 1,
          "direction": -1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": 2,
          "details": [
            {
              "id": "a1977b30-dfc8-0999-c6d0-3a0912e3db92",
              "idAccountingSubjectDTO": "f83cd61d-8c6c-aa80-e7c2-3a0912e3db91",
              "idAuxiliaryAccountingDTO": "70a43658-413c-5f4a-9046-3a02891b3457",
              "code": "2",
              "name": "个人",
              "attribute": ""
            },
            {
              "id": "9d156eb2-750d-f6fe-b861-3a0912e3db93",
              "idAccountingSubjectDTO": "f83cd61d-8c6c-aa80-e7c2-3a0912e3db91",
              "idAuxiliaryAccountingDTO": "6e7cd14a-91a5-b5f4-be01-3a02891c1828",
              "code": "4",
              "name": "项目",
              "attribute": ""
            }
          ],
          "balanceAmount": -3278
        },
        {
          "id": "a5191f71-1f8d-d065-3a1d-3a071b31435d",
          "code": "112301",
          "parentId": "578954ff-637d-4da4-adbd-32f50c4a053c",
          "name": "的司的第三方个人",
          "fullName": "预付账款/的司的第三方个人",
          "layer": 2,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 147
        },
        {
          "id": "2f34d18a-4da4-4be1-993e-bbd243a5ac97",
          "code": "1131",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "应收股利",
          "fullName": "应收股利",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        },
        {
          "id": "ec0bf2db-0eab-4e1c-9b18-d79f589d441b",
          "code": "1132",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "应收利息",
          "fullName": "应收利息",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        },
        {
          "id": "91006dfa-55bc-428a-808c-449d101a3a93",
          "code": "1231",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "其他应收款",
          "fullName": "其他应收款",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": [
            {
              "id": "d22e1724-9b55-3cb1-4c5c-3a042607c91a",
              "idAccountingSubjectDTO": "91006dfa-55bc-428a-808c-449d101a3a93",
              "idAuxiliaryAccountingDTO": "aeacc51c-5384-8d18-d19f-3a02891b7229",
              "code": "3",
              "name": "往来单位",
              "attribute": "0"
            }
          ],
          "balanceAmount": 4900
        },
        {
          "id": "510f9a8e-582a-4ce2-8b9d-52cb59fd1e6a",
          "code": "1241",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "坏账准备",
          "fullName": "坏账准备",
          "layer": 1,
          "subjectType": 1,
          "direction": -1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        },
        {
          "id": "61c70c56-b63e-4c7d-8f07-8882a02dcec0",
          "code": "1401",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "材料采购",
          "fullName": "材料采购",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        },
        {
          "id": "93976b8e-5d2f-4820-882d-1203dd1d970d",
          "code": "1402",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "在途物资",
          "fullName": "在途物资",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": -533.5
        },
        {
          "id": "a94e6a8d-cd9c-4021-b0d2-24474ed13e8a",
          "code": "1403",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "原材料",
          "fullName": "原材料",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 228.22
        },
        {
          "id": "abc5d62f-8e05-4c82-942c-0fecf7d41e28",
          "code": "1404",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "材料成本差异",
          "fullName": "材料成本差异",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": -17896.2
        },
        {
          "id": "b5b55449-13f1-401b-9549-1ccc43012859",
          "code": "1406",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "存货商品",
          "fullName": "存货商品",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": [
            {
              "id": "a3c5cfb5-f63b-10dd-f9f1-3a03dde89f44",
              "idAccountingSubjectDTO": "b5b55449-13f1-401b-9549-1ccc43012859",
              "idAuxiliaryAccountingDTO": "70a43658-413c-5f4a-9046-3a02891b3457",
              "code": "2",
              "name": "个人",
              "attribute": null
            },
            {
              "id": "0bf0042f-14ca-f8fd-b196-3a03ddfbd204",
              "idAccountingSubjectDTO": "b5b55449-13f1-401b-9549-1ccc43012859",
              "idAuxiliaryAccountingDTO": "981b6ae3-299a-f891-6f79-3a02891c3dce",
              "code": "5",
              "name": "存货",
              "attribute": null
            }
          ],
          "balanceAmount": -3249
        },
        {
          "id": "c3c67758-1bc6-4731-89af-60879a45a046",
          "code": "1407",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "发出商品",
          "fullName": "发出商品",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        },
        {
          "id": "ee2732c1-1ade-4178-92f0-d7661d5da3fa",
          "code": "1411",
          "parentId": "2add80c0-45a3-4ace-9da3-bcf704dd3e7c",
          "name": "委托加工物资",
          "fullName": "委托加工物资",
          "layer": 1,
          "subjectType": 1,
          "direction": 1,
          "sort": 0,
          "status": 1,
          "statusName": null,
          "typeName": null,
          "directionName": null,
          "parentName": null,
          "attribute": null,
          "details": null,
          "balanceAmount": 0
        }
      ],
      maxHeight: 300
    }
  },
  computed: {
    tableData: {
      get() {
        let items = this.data && this.data.length ? [...this.data] : [];
        if (!items || items.length < 5) items = [...items, ...this.initBillDetails(5 - items.length)];
        return items
      },
      set(items) {
        this.$emit('change', items)
        this.$emit('input', items);
        this.data = [...items];
      }
    },
    scrollY() { // 纵向滚动配置
      let conf = {enabled: true}
      conf['mode'] = 'default';   // default,wheel滚动模式
      conf['gt'] = 60;  // 指定大于指定行时自动启动纵向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false（注：启用纵向虚拟滚动之后将不能支持动态行高）
      return conf;
    },
    editConf() {    // 编辑配置
      return {trigger: 'click', enabled: true, mode: 'cell', showIcon: false};
    },
    rowConf() {  // 行配置信息
      let conf = {isCurrent: true, isHover: true};
      // conf['currentMethod'] = ({row}) => row['checked'] = true;
      return conf;
    },
    keyboardConf() { // 按键配置
      let conf = {isArrow: true, isEsc: false, isEnter: true, isTab: true, isEdit: true, isChecked: true, editMode: 'insert'};
      conf['editMode'] = 'insert';    // coverage, insert 支持覆盖式和末端插入式编辑
      return conf;
    }
  },
  watch() {},
  methods: {
    // 摘要选中
    doAbstractOptions(val) {
      console.log(`------doAbstractOptions-----${val}---------`);
    },
    // 摘要请求方法
    querySearch(key, cb) {
      let items = this.abstracOptions.map(t => {
        let obj = JSON.parse(JSON.stringify(t));
        obj.value = t.name;
        return obj;
      });
      if (key) {
        items = items.filter(t => t && t.value.toLowerCase().includes(key));
      }
      cb(items);
    },
    // 表格行选中变化
    doCurrentChange({ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event}) {
      if (newValue) newValue['checked'] = true;
      if (oldValue) oldValue['checked'] = false;
    },
    // 表格合计
    summaryData({columns, data}) {
      let items = [], totals = JSON.parse(JSON.stringify(detail));
      totals = data.reduce((p, t) => {
        if (t.amount) p.amount = (p.amount || 0) + t.amount;
        if (t.debitAmount) p.debitAmount = (p.debitAmount || 0) + t.debitAmount;
        if (t.creditAmount) p.creditAmount = (p.creditAmount || 0) + t.creditAmount;
        return p;
      }, totals);
      items = columns.reduce((p, t, i) => {
        if (i === 0) return [...p, '合计'];
        if (t.field === 'debitAmount') return [...p, Math.round(totals.debitAmount * 100) / 100];
        if (t.field === 'creditAmount') return [...p, Math.round(totals.creditAmount * 100) / 100];
        return [...p, ''];
      }, []);
      return [items];
    },
    // 初始化单据明细
    initBillDetails(num) {
      let items = [];
      if (!num || num < 0) return items;
      for (let i = 0; i < num; i++) {
        items.push(JSON.parse(JSON.stringify(detail)));
      }
      return items;
    },
  },
  filters: {
    numberSplit(val, index) {
      let num = '';
      if (val || val === 0) {
        let isLoess = val < 1, numArr = val.toFixed(2).split('').filter(t => t !== '.');
        if (isLoess) numArr.splice(0, 1);
        num = Array(11).fill('').concat(numArr).slice(-11)[index]
      }
      return num;
    }
  }
}
</script>

<style lang="less" scoped>
.v-table {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .el-main {
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0 10px 30px 10px;
  }

  .tc {text-align: center;}
  .tr {text-align: right;}
  .tl { text-align: left; }


}
</style>
